import { ref, createVNode } from 'vue';
import StaffDetailComponent from '@components/public/StaffDetailComponent.vue';
import { useI18n } from 'vue-i18n';
import useStaffModifier from './staff-modifier';
import { Modal } from 'ant-design-vue';
import { api } from '@/global/utils/api';
import { Staff } from '@/global/global';

export default function useStaffDetailModal(onModifySuccessed, onModifyFaild) {
  const { t } = useI18n();
  const { updateStaff } = useStaffModifier();

  const openStaffDetailModal = (staffId: number) => {
    const currentStaff = ref<Staff>();
    api.get(`/staff/getStaffById/${staffId}`).then(res => {
      if (res.data.code == 200) {
        currentStaff.value = res.data.data;
      }
    });
    Modal.confirm({
      title: t('operations.showOrModifyStaffDetail'),
      content: createVNode(StaffDetailComponent, {currentStaff, t}),
      width: 500,
      onOk: () => {
        // 发送修改请求
        updateStaff(currentStaff.value, onModifySuccessed, onModifySuccessed);
      }
    })
  }

  return { openStaffDetailModal }
}